/*
 * Copyright 2022 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'mixins';
@import '../Page/mixins';

body[kui-theme-style='light'] {
  @include Sidebar {
    --kui--sidebar-color-01: var(--color-base00);
    --kui--sidebar-color-02: var(--color-base02);
  }
  @include KuiTabContainer {
    @include SidebarToggleButton {
      --kui--sidebar-toggle-button-color: var(--color-text-02);
    }
  }
}

@include KuiTabContainer {
  @include Sidebar {
    --kui--sidebar-color-01: var(--color-text-01);
    --kui--sidebar-color-02: var(--color-text-02);

    display: flex;
    flex-direction: column;
  }
  @include SidebarBody {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: hidden; /* !!! keep bottom-aligned content always in view */
    padding: 1rem 0 0.5rem;
  }
  @include SidebarNav {
    flex: 1;
    overflow-y: auto; /* !!! keep bottom-aligned content always in view */
  }
  @include SidebarBottomAlignedContent {
    margin-top: 1em;
    padding: 0 var(--pf-global--spacer--lg);
  }

  @include SidebarNavMenuButton {
    color: var(--kui--sidebar-color-01);
    &:hover {
      color: var(--kui--sidebar-color-01);
    }
  }

  @include SidebarNavMenu {
    @include SidebarNavItem {
      color: var(--kui--sidebar-color-02);
    }
    @includesidebarnavitemhover;
  }
  @include SidebarNavItem {
    color: var(--kui--sidebar-color-01);

    a:hover {
      cursor: pointer;
      color: var(--kui--sidebar-color-01);
    }
  }
  @include SidebarToggleButton {
    --kui--sidebar-toggle-button-color: var(--kui--sidebar-color-02);
    font-size: 1.25em;
  }
  @include SidebarToggleIcon {
    color: var(--kui--sidebar-toggle-button-color);
  }
}

/* Coloring of bottom-aligned text */
@include Sidebar {
  @include SidebarBottomAlignedContent {
    .sub-text {
      opacity: 0.8;
      color: var(--kui--sidebar-color-02);
    }
    .semi-bold {
      color: var(--kui--sidebar-color-01);
    }
  }
}
